<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<!-- view -->
<div id="app">
    <!-- 插值表达式 -->
    <!-- 插值表达式中允许调用方法 -->
    <h1>{{name.split("").reverse().join("")}}</h1>
    <!-- 允许使用三元表达式 -->
    <h1>{{num > 20 ? '超过20了' : '没超过20'}}</h1>
    <!-- 可以使用数学运算符 -->
    <h1>{{num + 30}}</h1>
    <!-- 不可以使用if语句 -->
    <!-- <h1>{{if(true){}}}</h1> -->
    <!-- 不允许在视图层中的插值表达式中修改data数据 -->
    <h1>{{num = num + 1}}</h1>
</div>
</body>

</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // vu3里面有app(应用的概念),为了解决vue2中配置污染的问题,vue3有了app的概念

    //vue3中,data必须要是一个函数

    let vm = Vue.createApp({
        //数据层
        data() { //M层 数据层
            return {
                name: '李雷',
                num: 20
            }
        }
    })

    //直接调用挂载的方法

    vm.mount("#app")


</script>